<!-- components/navigation/MainContent.vue -->
<template>
  <main class="main-content">
    <router-view />
  </main>
</template>

<script setup lang="ts">
// @ts-nocheck
// 主内容区组件
</script>

<style scoped>
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: var(--bg-color, #f5f7fa);
  height: calc(100vh - 60px);
}

/* 响应式设计 */
@media (max-width: 767px) {
  .main-content {
    padding: 10px;
  }
}

/* 滚动条样式 */
.main-content::-webkit-scrollbar {
  width: 6px;
}

.main-content::-webkit-scrollbar-track {
  background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
  background: rgba(144, 147, 153, 0.3);
  border-radius: 4px;
  transition: background 0.3s;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background: rgba(144, 147, 153, 0.5);
}
</style>